<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>帖子内容</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/milligram.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/fonts.style.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/jQueryCode.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <!--<link rel="stylesheet" href="../static/css/bootstrap.min.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="../static/css/milligram.min.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="../static/css/fonts.style.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="../static/css/style.css" type="text/css" />-->


    <!--<script src="../static/js/jquery-3.4.1.js"></script>-->
    <!--<script src="../static/js/jQueryCode.js"></script>-->
    <!--<script src="../static/js/bootstrap.min.js"></script>-->
</head>
<body>
<div class="top-nav animation-bg-color-skyblue">
    <div class="logo">
        <a href="#"><img th:src="@{/img/logo.png}" /></a>
    </div>
    <div class="account-check fr">
        <div class="before-login">
            <a class="a-btn animation" href="/user/login">
                <span class="icon-enter"></span>登录
            </a>
            <a class="a-btn animation" href="/user/register">
                <span class="icon-user-plus"></span>注册
            </a>
        </div>
        <div class="after-login hide">
            <!--<a class="a-btn animation fr" href="#">-->
            <!--<span class="icon-exit"></span>退出-->
            <!--</a>-->
            <h5 class="fr">欢迎登陆:13049148938</h5>
        </div>
    </div>

    <div class="s-side animation-bg-color-skyblue">
        <ul>
            <!--这部分是导航栏信息。-->
            <li class="s-firstItem first">
                <a href="/user/index">
                    <i class="fa fa-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <!--查找-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>查找</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toFindEval">
                            查找医生&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--预约挂号-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>预约挂号</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/reservation/toReserve">
                            预约&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>

            <!--社区-->
            <li class="first">
                <div class="d-firstNav s-firstNav">
                    <i class="fa fa-bars"></i>
                    <span>社区</span>
                    <i class="fa fa-caret-right fr" ></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>文章</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toSendArticle">
                                    发表文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/community/showArticle">
                                    浏览文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>帖子</span>
                            <i class="fa fa-caret-right fr "></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toCommunity">
                                    浏览帖子&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <!--个人中心-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>个人中心</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>个人资料</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/user/userInfo">
                                    个人信息&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/password">
                                    修改密码&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/verify">
                                    实名认证&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>钱包</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/reservation/toWallet">
                                    我的钱包&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toRecharge">
                                    充值&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toBill">
                                    我的账单&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/community/toCollection">
                            我的收藏&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toMyEvaluate">
                            我的评价&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="layout">
    <div class="container">
        <h3>查询帖子</h3>
        <hr class="divider"><!-- 分界线 -->
        <!--搜索框 start-->
        <div class="row search">
            <form class="search-form" th:action="@{/community/findTopicByTitle}" method="post">
                <div class="row box-holder">
                    <input class="col-10 search-box" type="text" name="title" th:value="${title}" />
                    <button class="col-2 search-btn d-flex align-items-center animation" type="submit">
                        <div class="content">
                            <span class="icon-search"></span>
                            搜索
                        </div>
                    </button>
                </div>
            </form>
        </div>
        <!--搜索框 end-->
        <hr class="divider"><!-- 分界线 -->
        <!--帖子 start-->
        <div class="row topic">
            <h4 class="col-12">帖子</h4>
            <div class="col-12">
                <a th:each="topic : ${topiclist}" th:href="@{/community/toTopic/}+${topic.id}">
                    <div class="topic-box animation">
                        <span class="topic-title animation"><h5>[[${topic.title}]]</h5></span>
                        <span class="topic-content">[[${topic.content}]]</span>
                        <span class="topic-time"><small>[[${topic.time}]]</small></span>
                        <div class="clear-fix"></div>
                    </div>
                </a>
            </div>
        </div>
        <!--帖子 end-->
        <!--页码 start-->
        <div class="pagination-box">
            <!--页码-->
            <a class="a-btn animation" th:href="@{/community/findTopicByTitle(title = ${title})}">首页</a>
            <a class="a-btn animation" th:href="@{/community/findTopicByTitle(pn = ${topiclist.hasPrevious()} ? ${topiclist.getNumber()}-1:0,title = ${title})}">上一页</a>
            <div class="page-number">
                <th:block th:each="i : ${#numbers.sequence(1,topiclist.totalPages)}">
                    <a class="a-btn animation" th:href="@{/community/findTopicByTitle(pn = ${i}-1,title = ${title})}">
                        <th:block th:text="${i}"></th:block>
                    </a>
                </th:block>
            </div>
            <a class="a-btn animation" th:href="@{/community/findTopicByTitle(pn = ${topiclist.hasNext()} ? ${topiclist.getNumber()}+1:${topiclist.totalPages}-1,title = ${title})}">下一页</a>
            <a class="a-btn animation" th:href="@{/community/findTopicByTitle(pn = ${topiclist.totalPages}-1,title = ${title})}">尾页</a>
        </div>
        <div class="page-msg">
            <!--页码信息-->
            <span>当前第<span th:text="${topiclist.getNumber()+1}"></span>页</span>
            <span>总共<span th:text="${topiclist.totalPages}"></span>页</span>
            <span>共<span th:text="${topiclist.totalElements}"></span>条记录</span>
        </div>
        <!--页码 end-->
    </div>
    <div class="bubbles">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>
</div>

</body>
</html>